<template>
  <div class="white-bg commonBoxmp">
    <el-scrollbar class="HeightAuto">
      <div id="vditor" />
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import Vditor from "vditor";
import "vditor/dist/index.css";

const vditor = ref<Vditor | null>(null);

onMounted(() => {
  vditor.value = new Vditor("vditor", {
    after: () => {
      vditor.value!.setValue(
        "Vue Composition API + Vditor + TypeScript Minimal Example",
      );
    },
  });
});
</script>

<style>
#vditor {
  height: 500px;
}
</style>
